<template>
  <div class="app-container calendar-list-container">
    <!--条件查询-->
    <div class="filter-container">
      <el-input  style="width: 200px;" class="filter-item" v-model="query.appName" :placeholder="'服务名称'">
      </el-input>
      <el-input  style="width: 200px;" class="filter-item" v-model="query.id" :placeholder="'服务id'">
      </el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getList">{{$t('table.search')}}</el-button>
      <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"  v-loading="downloadLoading" element-loading-text="正在下载中" @click="handleDownload">{{$t('table.export')}}</el-button>
    </div>
    <!--带边框的表格-->
    <el-table
      :data="tableData"
      border
      v-loading="listLoading" element-loading-text="拼命加载中"
      style="width: 100%">
      <!--展开显示详情-->
      <el-table-column
        type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="instanceId">
              <span>{{ props.row.instanceId }}</span>
            </el-form-item>
            <el-form-item label="app">
              <span>{{ props.row.app }}</span>
            </el-form-item>
            <el-form-item label="appGroupName">
              <span>{{ props.row.appGroupName }}</span>
            </el-form-item>
            <el-form-item label="ipAddr">
              <span>{{ props.row.ipAddr }}</span>
            </el-form-item>
            <el-form-item label="homePageUrl">
              <span>{{props.row.homePageUrl}}</span>
            </el-form-item>
            <el-form-item label="statusPageUrl">
              <span>{{ props.row.statusPageUrl }}</span>
            </el-form-item>
            <el-form-item label="healthCheckUrl">
              <span>{{ props.row.healthCheckUrl}}</span>
            </el-form-item>
            <el-form-item label="hostName">
              <span>{{ props.row.hostName }}</span>
            </el-form-item>
            <el-form-item label="renewalIntervalInSecs">
              <span>{{ props.row.leaseInfo.renewalIntervalInSecs }}</span>
            </el-form-item>
            <el-form-item label="durationInSecs">
              <span>{{ props.row.leaseInfo.durationInSecs }}</span>
            </el-form-item>
            <el-form-item label="registrationTimestamp">
              <span>{{ props.row.leaseInfo.registrationTimestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </el-form-item>
            <el-form-item label="lastRenewalTimestamp">
              <span>{{ props.row.leaseInfo.lastRenewalTimestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </el-form-item>
            <el-form-item label="serviceUpTimestamp">
              <span>{{ props.row.leaseInfo.serviceUpTimestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </el-form-item>
            <el-form-item label="isCoordinatingDiscoveryServer">
              <span>{{ props.row.isCoordinatingDiscoveryServer }}</span>
            </el-form-item>
            <el-form-item v-for=" (value,item) in props.row.metadata" :label="item" :key="item">
              <span>{{ value }}</span>
            </el-form-item>
            <el-form-item label="lastUpdatedTimestamp">
              <span>{{ props.row.lastUpdatedTimestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </el-form-item>
            <el-form-item label="lastDirtyTimestamp">
              <span>{{ props.row.lastDirtyTimestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
            </el-form-item>
            <el-form-item label="actionType">
              <span>{{ props.row.actionType }}</span>
            </el-form-item>
            <el-form-item label="asgName">
              <span>{{ props.row.asgName }}</span>
            </el-form-item>
            <el-form-item label="overriddenStatus">
              <span>{{ props.row.overriddenStatus }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!--多选支持-->
      <!--<el-table-column-->
      <!--type="selection"-->
      <!--&gt;-->
      <!--</el-table-column>-->
      <!--自定义索引-->
      <el-table-column
        type="index"
        label="序号"
        align="center"
        :index="indexMethod">
      </el-table-column>
      <el-table-column
        prop="app"
        sortable
        label="服务名称"
      >
      </el-table-column>
      <el-table-column
        prop="ipAddr"
        label="IP地址"
      >
      </el-table-column>
      <el-table-column
        prop="hostName"
        label="域名"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="服务状态">
      </el-table-column>
      <!--操作按钮-->
      <el-table-column align="center" :label="$t('table.actions')" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--修改服务状态-->
          <el-button v-waves type="warning" plain size="mini" @click="handleUpdate(scope.row)">{{$t('table.edit')}}</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--添加系统-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="temp" :model="temp" label-position="right" label-width="80px" style='width: 400px; margin-left:50px;'>
        <!--prop用于进行表单校验-->
        <el-form-item label="app" prop="app">
          <el-input v-model="temp.app" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="instanceId" prop="instanceId">
          <el-input v-model="temp.instanceId" :disabled="true"></el-input>
        </el-form-item>
        <!--系统状态-->
        <el-form-item :label="'系统状态'" prop="status">
          <el-select  clearable style="width: 180px" class="filter-item" v-model="temp.status" :placeholder="'状态'">
            <el-option v-for="item in status" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button v-waves type="warning" plain @click="updateData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import waves from '@/directive/waves' // 水波纹指令
  import { getByAppName, getAll, getById, getByIdAndAppName, updateService } from '@/api/ops/service_manage'
  import { parseTime } from '@/utils'
  export default {
    directives: {
      waves
    },
    data() {
      return {
        tableData: [ // 查询的数据
        ],
        listLoading: false,
        downloadLoading: false,
        dialogFormVisible: false,
        query: { // 用于查询
          appName: '',
          id: ''
        },
        temp: {},
        textMap: {
          update: '编辑'
        },
        status: ['OUT_OF_SERVICE', 'DOWN', 'UP', 'UNKNOWN', 'STARTING'],
        dialogStatus: 'update',
        rules: {
          status: [
            { required: true, message: '请选择系统状态', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      deepClon(obj) { // 深度克隆对象
        const proto = Object.getPrototypeOf(obj)
        return Object.assign({}, Object.create(proto), obj)
      },
      getList() { // 加载服务
        this.listLoading = true
        if (this.query.appName === '' && this.query.id === '') {
          getAll().then(response => {
            this.listLoading = false
            if (response.data.code === 0) {
              this.tableData = response.data.data
            }
          })
        } else if (!(this.query.appName === '') && this.query.id === '') {
          getByAppName(this.query.appName).then(response => {
            this.listLoading = false
            if (response.data.code === 0) {
              this.tableData = response.data.data
            }
          })
        } else if (this.query.appName === '' && !(this.query.id === '')) {
          getById(this.query.id).then(response => {
            this.listLoading = false
            if (response.data.code === 0) {
              this.tableData = response.data.data
            }
          })
        } else {
          getByIdAndAppName(this.query.appName, this.query.id).then(response => {
            this.listLoading = false
            if (response.data.code === 0) {
              if (response.data.data) {
                const arr = []
                arr[0] = response.data.data
                this.tableData = arr
                this.tableData = arr
              } else {
                this.tableData = []
              }
            }
          })
        }
      },
      handleUpdate(item) {
        if (this.$refs.temp) {
          this.$refs.temp.clearValidate()
        }
        this.temp = this.deepClon(item)
        this.dialogFormVisible = true
      },
      updateData() {
        this.$refs.temp.validate(response => {
          if (response) {
            updateService(this.temp.app, this.temp.instanceId, this.temp.status).then(response => {
              this.dialogFormVisible = false
              if (response.data.code === 0) {
                this.$message({
                  message: '更新服务状态成功!',
                  type: 'success'
                })
                this.getList()
              } else {
                this.$message({
                  message: '更新服务状态失败!',
                  type: 'error'
                })
              }
            })
          }
        })
      },
      indexMethod(index) { // 自定义序号
        return index + 1
      },
      handleDownload() { // 导出当前页数据到excel
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['服务名称', '服务id', 'ip地址', '域名', '状态', '主页', '服务信息页', '健康检查地址', '状态更新时间', '动作类型', '新的状态']
          const filterVal = ['app', 'instanceId', 'ipAddr', 'hostName', 'status', 'homePageUrl', 'statusPageUrl', 'healthCheckUrl', 'lastUpdatedTimestamp', 'actionType', 'overriddenStatus']
          const data = this.formatJson(filterVal, this.tableData)
          excel.export_json_to_excel(tHeader, data, 'ops_service')
          this.downloadLoading = false
        })
      },
      formatJson(filterVal, jsonData) { // 格式化时间
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'lastUpdatedTimestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
